<script lang="ts" setup>
import { getSvg } from "@/utils";
import useNumbers from "../../hooks/useNumbers";
const { deleteNumbers, handleFocus, handleBlur } = useNumbers();
const props = defineProps({
  numbers: { type: [String, Number], default: () => [] },
  idx: { type: Number, default: 0 },
  count: { type: Number, default: 1 },
  showKeyboard: { type: Boolean, default: false },
  type: { type: String, default: "normal" },
  style: { type: Object, default: () => ({}) },
  showError: { type: Boolean, default: false }
});

const emit = defineEmits([
  "update:numbers",
  "update:count",
  "update:showKeyboard"
]);

const count = useRefModel(props, "count", emit);
const numbers = useRefModel(props, "numbers", emit);
const showKeyboard = useRefModel(props, "showKeyboard", emit);

const { type, style, showError } = props;

useNumberLimit(numbers);

const handleDecrease = () => {
  count.value = Math.max(1, count.value - 1);
};

const handleIncrease = () => {
  count.value = Math.min(100, count.value + 1);
};
</script>

<template>
  <div
    class="w-314 h-38 mx-auto flex justify-between items-center gap-x-6 mb-12"
    :class="[type, { 'mb-[25px_!important]': showError }]"
  >
    <img
      class="w-20 h-20"
      :src="getSvg('delete')"
      alt=""
      @click="deleteNumbers({ idx })"
    />

    <div class="w-full h-38 relative">
      <van-password-input
        :value="numbers"
        :mask="false"
        :focused="showKeyboard"
        @focus="handleFocus({ idx })"
        class="w-full"
        :style="style"
        :length="6"
      />
      <p
        v-if="showError"
        class="absolute left-0 bottom-[-13px] font-400 text-11 color-[#FF3D3D] lh-13 text-left not-italic"
      >
        {{ $t("title17") }}
      </p>
    </div>

    <Teleport to="body">
      <van-number-keyboard
        v-model="numbers"
        :show="showKeyboard"
        @blur="handleBlur({ idx })"
        style="--van-number-keyboard-z-index: 9999; padding-bottom: 0"
      />
    </Teleport>

    <div
      class="w-57 h-18 flex justify-between items-center bg-[#EFF7FF] rounded-18"
    >
      <div
        @click="handleDecrease"
        class="w-18 h-18 bg-[#D7ECFF] rounded-50% center"
      >
        <img
          class="w-8 h-auto"
          :src="getSvg(count <= 1 ? 'Line_10' : 'Line_9')"
          alt=""
        />
      </div>
      <input
        class="w-20 h-full font-400 text-11 color-[#004894] lh-13 text-center not-italic"
        type="number"
        v-model.number="count"
      />
      <div
        @click="handleIncrease"
        class="w-18 h-18 bg-[#A6D4FF] rounded-50% center"
      >
        <img
          class="w-8 h-8"
          :src="getSvg(count >= 100 ? 'Union(3)' : 'Union(2)')"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.prefix_3 {
  :deep(.van-password-input) {
    .van-password-input__security {
      li {
        &:nth-of-type(1),
        &:nth-of-type(2),
        &:nth-of-type(3) {
          background-color: #e4fffc;
          color: #2ad270;
          border-radius: 4px;
          border: 2px solid #faed38;
        }
        &:nth-of-type(1) {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          border-right: none;
        }
        &:nth-of-type(2) {
          border-radius: 0;
          border-left: none;
          border-right: none;
        }
        &:nth-of-type(3) {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          border-left: none;
        }

        &:nth-of-type(4),
        &:nth-of-type(5),
        &:nth-of-type(6) {
          margin-left: 6px;
          border-radius: 4px;
          background-color: #e4f1ff;
          color: #186dc8;
        }
      }
    }
  }
}
.suffix_3 {
  :deep(.van-password-input) {
    .van-password-input__security {
      li {
        &:nth-of-type(4),
        &:nth-of-type(5),
        &:nth-of-type(6) {
          background-color: #e4fffc;
          color: #2ad270;
          border-radius: 4px;
          border: 2px solid #faed38;
        }
        &:nth-of-type(4) {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          border-right: none;
        }
        &:nth-of-type(5) {
          border-radius: 0;
          border-left: none;
          border-right: none;
        }
        &:nth-of-type(6) {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          border-left: none;
        }

        &:nth-of-type(1),
        &:nth-of-type(2),
        &:nth-of-type(3) {
          margin-right: 6px;
          border-radius: 4px;
          background-color: #e4f1ff;
          color: #186dc8;
        }
      }
    }
  }
}
.suffix_2 {
  :deep(.van-password-input) {
    .van-password-input__security {
      li {
        &:nth-of-type(1),
        &:nth-of-type(2),
        &:nth-of-type(3),
        &:nth-of-type(4) {
          margin-right: 6px;
          border-radius: 4px;
          background-color: #e4f1ff;
          color: #186dc8;
        }
        &:nth-of-type(5),
        &:nth-of-type(6) {
          background-color: #e4fffc;
          color: #2ad270;
          border-radius: 4px;
          border: 2px solid #faed38;
        }
        &:nth-of-type(5) {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          border-right: none;
        }
        &:nth-of-type(6) {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          border-left: none;
        }
      }
    }
  }
}
.normal {
  :deep(.van-password-input) {
    .van-password-input__security {
      li {
        margin-right: 6px;
        border-radius: 4px;
        &:last-of-type {
          margin-right: 0;
        }
      }
    }
  }
}
.notWinning {
  :deep(.van-password-input) {
    .van-password-input__security {
      border-radius: 4px;
      border: 2px solid #d6d6d6;
    }
  }
}
.numberError {
  :deep(.van-password-input) {
    .van-password-input__security {
      li {
        margin-right: 6px;
        border-radius: 4px;
        &:last-of-type {
          margin-right: 0;
        }
      }
    }
  }
}

.winning {
  :deep(.van-password-input) {
    .van-password-input__security {
      border-radius: 4px;
      border: 2px solid #faed38;
    }
  }
}
</style>
